// @ts-nocheck
import React, { FC, useState, useEffect, useMemo } from "react";
import {
  NavBar,
  Button,
  Form,
  Input,
  Cascader,
  TextArea,
  ImageUploader,
  Toast,
} from "antd-mobile";
import { Spin } from "antd";
import { useNavigate } from "react-router-dom";
import { CascaderOption } from "antd-mobile/es/components/cascader";
import { getListToOptions } from "@/utils/tools";
import { IAddressItem } from "@/components/MapComponent";
// service
import { addPointView } from "../service";
import { getCurrentUser } from "@/utils/authority";
import { HandOk } from "@/components";

// style
import "./index.less";

interface IFormState {
  content: string;
}

interface IStartFormState {
  pointViewPeopleId: string;
  pointViewPeopleName: string;
  pointViewContent: string;
  residentDeliberationId: string;
}

function GotoJoin() {
  const userId = getCurrentUser()?.data?.user_id;
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loaing, setLoaing] = useState(false);
  const [handOk, setHandOk] = useState(false)
  const [user, setUser] = useState({})
  const [articleId, setArticleId] = useState<string>("")

  useEffect(() => {
    const id = location?.search?.substring(1)
    console.log(id.split("=")?.[1]);
    setArticleId(id.split("=")?.[1]);
  }, [location])

  const onFinish = async (values: IFormState) => {
    setLoaing(true);
    const formCommitData: IStartFormState = {
      pointViewPeopleId: user?.user_id,
      pointViewPeopleName: user?.real_name,
      pointViewContent: values.content,
      residentDeliberationId: articleId,
    };
    try {
      const parma = formCommitData;
      const { success } = await addPointView(parma);
      if (!success) {
        Toast.show({
          icon: "fail",
          content: "提交失败",
        });
        setLoaing(false);
        return;
      }
      if (success) {
        setLoaing(false);
        Toast.show({
          icon: "success",
          content: "提交成功",
        });
        setHandOk(true)
        // navigate("/");
      }
    } catch (err) {
      console.error(err);
    }
  };
  
  useEffect(() => {
    const formItem = JSON.parse(
      localStorage.getItem("form") || JSON.stringify("")
    );
    form.setFieldsValue(formItem);
    const users = JSON.parse(
      localStorage.getItem("users") || JSON.stringify({})
    );
    setUser(users)
    return () => {
      localStorage.removeItem("form");
      form.resetFields();
    };
  }, []);

  return (
    handOk ? <HandOk topTitle="提交成功" title="感谢您的参与" header='参与议事'/>
      :
      <Spin tip="提交中..." spinning={loaing}>
        <div className="reportcontent">
          <div>
            <NavBar
              onBack={() => navigate(`/intelligentGovernance/theTownHall/proceedingsDetails?type=proceedingsDetails&&detail=${articleId}`)}
            >
              <div className="commontitle">参与议事</div>
            </NavBar>
          </div>

          <div className="eventFrom">
            <Form form={form} onFinish={onFinish}>
              <Form.Item
                name="content"
                label="观点描述"
                className="eventContent"
                rules={[{ required: true, message: "必填项" }]}
              >
                <TextArea placeholder="请输入事件描述" rows={18} />
              </Form.Item>
              <div className="bottomButton">
                <Button
                  onClick={(e) => {
                    if (!loaing) {
                      e.preventDefault();
                      form.submit();
                    }
                  }}
                  type="submit"
                  className="reportbtn "
                  style={{ fontSize: "1.5rem" }}
                >
                  {loaing ? "提交中" : "提交"}
                </Button>
              </div>
            </Form>

          </div>
        </div>
      </Spin>
  );
}

export default GotoJoin;
